<template>
  <div class="page_style">
    <PageSider />
    <div class="content_style">
      <PageHeader />
      <div class="page_content_style">
        <div class="page_show_style">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PageSider from "./components/pageSider.vue";
import PageHeader from "./components/pageHeader.vue";
export default {
  data() {
    return {
      collapsed: false
    };
  },
  components: { PageSider, PageHeader },
};
</script>
<style lang="less" scoped>
.page_style {
  display: flex;
  height: 100%;
  .content_style {
    display: flex;
    flex-direction: column;
    flex: 1;
    .page_content_style{
      padding: 20px;
      flex: 1;
      background-color: #f0f2f5;
      box-sizing: border-box;
    }

    .page_show_style {
      height: calc(100vh - 104px);
      overflow-y: scroll;
    }
  }
}
</style>
